<template>
    <div class="info" v-if="myuser">
        <div class="top">
            <h2>管理我的账号</h2>
            <div class="content">
                <div></div>
                <img :src="myuser.avatar" alt="" ref="img" />
                <input @change="onchange" type="file" class="inp" accept="image/*" />
                <div class="name">
                    <span>{{ myuser.nickname }}</span>
                    <p>
                        绑定手机号: <i>{{ myuser.phone }}</i>
                    </p>
                </div>
            </div>
        </div>

        <div class="bj"></div>

        <!-- 昵称部分 -->
        <van-cell-group class="nickname" v-if="myuser">
            <!-- <van-cell class="nackname-cell" title="昵称" :value="nackname" /> -->
            <van-field v-model="myuser.nickname" class="nackname-cell" label="昵称" input-align="right" />
            <van-cell class="nackname-cell" title="ID号" :value="myuser.uid" center value-class="value-class">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                    <van-icon name="lock" class="search-icon" />
                </template>
            </van-cell>

            <van-cell class="nackname-cell" title="手机号码" :value="myuser.phone" center value-class="value-class">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                    <van-icon name="lock" class="search-icon" />
                </template>
            </van-cell>

            <van-cell class="nackname-cell" title="密码" value="点击修改密码" is-link center />
        </van-cell-group>

        <!-- 俩个按钮 -->
        <div class="btnbj">
            <van-button class="btn" color="linear-gradient(to right, #ff6034, #ee0a24)" size="large" @click="save"> 保存修改 </van-button>
            <van-button class="btn" color="#e93323" plain size="large" @click="loginouts">退出登录</van-button>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
    data() {
        return {
            nackname: null,
        };
    },
    // 拿到用户数据
    computed: {
        ...mapGetters(["myuser"]),
    },
    created() {},
    methods: {
        ...mapMutations(["loginout", "changePath", "setloguser"]),
        ...mapActions(["getUserInfo"]),
        // 退出登录
        loginouts() {
            this.loginout();
            this.$router.push("/login");
        },

        // 修改头像跟名字
        save() {
            // 当前的名字等于修改的名字
            this.nackname = this.myuser.nickname;
            this.axios.post("/user/edit", { avatar: this.myuser.avatar, nickname: this.nackname }).then((re) => {
                console.log(re);
                if (re.status === 200) {
                    this.$toast(re.msg);
                    this.imgPath = re.msg;
                    // 重新获取用户学习
                    this.getUserInfo();
                }
            });
        },

        // 实现头像上传功能
        onchange(event) {
            // new 一个接受的对象
            let fd = new FormData();

            fd.append("file", event.target.files[0]);

            this.axios.post("/upload/image", fd).then((re) => {
                console.log(re);
                // 判断状态码
                if (re.url) {
                    this.$toast("图片上传成功");
                    // 更换当前图片
                    this.$refs.img.src = re.url;
                    // 获取当前用户的信息
                    let loginuser = this.myuser;
                    // 修改用户数据中的图片地址
                    loginuser.avatar = re.url;
                    // 重新赋值
                    this.setloguser(loginuser);
                } else {
                    this.$toast(re.msg);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.info {
    display: flex;
    flex-direction: column;
    align-items: center;

    // justify-content: center;
    // 顶部部分
    .top {
        display: flex;
        flex-direction: column;
        width: 90vw;
        margin-bottom: 20px;

        h2 {
            font-size: 16px;
            margin: 22px 0 10px 0;
        }
        .content {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            border: 1px solid red;
            width: 345px;
            height: 70px;
            border-radius: 12px;
            margin-top: 10px;
            position: relative;
            background: rgba(224, 66, 66, 0.1);

            &::after {
                content: "当前账号";
                width: 70px;
                height: 20px;
                background: #fde5e3;
                color: red;
                font-size: 12px;
                line-height: 20px;
                text-align: center;
                border-bottom-left-radius: 12px;
                border-top-right-radius: 12px;
                position: absolute;
                right: 0.5%;
                top: 1%;
            }
            img {
                width: 48px;
                height: 48px;
                margin: 10px;
                border-radius: 50%;
            }
            .inp {
                position: absolute;
                left: 0;
                top: 0;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                margin: 10px;
                opacity: 0;
                cursor: pointer;
            }

            .name {
                span {
                    font-size: 16px;
                    margin-bottom: 10px;
                }
                p {
                    font-size: 12px;
                    margin-top: 10px;
                    color: gray;
                }
            }
        }
    }
    .bj {
        width: 100vw;
        height: 5px;
        background: #f5f5f5;
    }

    //昵称部分
    .nickname {
        width: 90vw;
        margin-top: 10px;
        padding: 0;
        .nackname-cell {
            height: 51.8px;
            line-height: 51.8px;
            padding: 0;
            // margin-top: 1px;
            border-top: 0.5px solid rgba(239, 237, 237, 0.5);
            &:nth-child(1) {
                border-top: none;
            }
        }
        .value-class {
            margin-right: 10px;
        }
    }

    // 俩个按钮
    .btnbj {
        display: flex;
        flex-direction: column;
        background: #f5f5f5;
        width: 100vw;
        height: 44vh;
        justify-content: center;
        align-items: center;
        .btn {
            width: 90vw;
            margin: 0 auto;
            border-radius: 25px;
            margin-top: 10px;
        }
    }
}
</style>
